// ParticipantList.js
export default {
  name: 'ParticipantList',
  props: {
    participants: {
      type: Array,
      required: true,
      default: () => []
    },
    // selectedAgentId prop might be useful for styling the selected item
    selectedAgentId: {
        type: String,
        default: null
    }
  },
  emits: ['select-agent'], // Declare the event
  setup(props, { emit }) {
    const selectParticipant = (participantId) => {
      console.log('ParticipantList.js: participant clicked, emitting select-agent with ID:', participantId);
      emit('select-agent', participantId);
    };

    return {
      selectParticipant
      // props are automatically available in the template
    };
  },
  template: `
  <div class="participant-list">
    <h4>参与者</h4>
    <div v-if="participants && participants.length > 0">
      <div v-for="participant in participants"
           :key="participant.participant_id"
           class="participant-item"
           :class="{ 'selected': participant.participant_id === selectedAgentId }"
           @click="selectParticipant(participant.participant_id)">
        <span class="participant-icon">{{ participant.role === 'human' ? '👤' : '🤖' }}</span>
        <span class="participant-nickname">{{ participant.nickname }}</span>
        <span class="participant-role">({{ participant.role }})</span>
      </div>
    </div>
    <div v-else>
      <p>暂无参与者</p>
    </div>
  </div>
  `
  // 注意：来自 ParticipantList.vue 的 <style scoped> 内容未包含在此处。
  // 如果需要样式，需要将其添加到全局 CSS 或通过其他方式处理。
};